<template>
  <div class="app_main">
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :sm="24" :md="12" :xxl="6">
              <a-form-item label="商户名称">
                <a-input v-model="queryParam.merchantName" placeholder="请输入商户名称" />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xxl="6">
              <a-form-item label="门店名称">
                <a-input v-model="queryParam.shopName" placeholder="请输入门店名称" />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xxl="6">
              <a-form-item label="筛选">
                <a-radio-group v-model="queryParam.budget">
                  <a-radio-button value="all">全部</a-radio-button>
                  <a-radio-button value="single">单一预算</a-radio-button>
                  <a-radio-button value="sevenDay">七日预算</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xxl="6">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="onSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="shop_list">
        <div class="shop_item" v-for="item in list" :key="item.id">
          <div class="shop_item_header">
            <div class="shop_item_title shop_item_title_shop">
              <a-select v-model="item.id" placeholder="请选择门店">
                <a-select-option
                  v-for="(val, idx) in item.storeList"
                  :key="idx + 'store'"
                  :value="val.id"
                  :title="val.name"
                  >{{ val.name }}</a-select-option
                >
              </a-select>
            </div>
            <div class="shop_item_title shop_item_header_period">
              <!-- <span class="shop_item_title_label"></span> -->
              <a-select v-model="item.timePeriodId" placeholder="请选择推广计划">
                <a-select-option v-for="(val, idx) in item.periods" :key="idx + 'period'" :value="val.periodId">{{
                  val.periodName
                }}</a-select-option>
              </a-select>
            </div>
            <div class="shop_item_title shop_item_title_balance">账户余额(￥2340.1)</div>
            <div class="warning_tip">!</div>
          </div>
          <div class="operate_area">
            <dl>
              <dt>出价</dt>
              <dd>
                <ol>
                  <li>
                    <div class="operate_title">
                      <span>点评</span>
                      <i>预估排位 19</i>
                    </div>
                    <div class="operate_content">
                      <span>￥3.441</span>
                      <a @click="showOfferPriceModel">修改</a>
                    </div>
                  </li>
                  <li>
                    <div class="operate_title">
                      <span>美团</span>
                      <i>预估排位 19</i>
                    </div>
                    <div class="operate_content">
                      <span>￥3.21</span>
                      <a @click="showOfferPriceModel">修改</a>
                    </div>
                  </li>
                </ol>
              </dd>
            </dl>
            <dl>
              <dt>预算</dt>
              <dd>
                <ol>
                  <li>
                    <div class="operate_title">
                      <span>普通日预算</span>
                    </div>
                    <div class="operate_content">
                      <span>￥321</span>
                      <a @click="showBudgetModal">修改</a>
                    </div>
                  </li>
                  <li>
                    <div class="operate_title">
                      <span>高峰日预算</span>
                    </div>
                    <div class="operate_content">
                      <span>￥3.21</span>
                      <a @click="showBudgetModal">修改</a>
                    </div>
                  </li>
                </ol>
              </dd>
            </dl>
          </div>
          <div class="custom_box">
            <div class="custom_time">
              <a-radio-group>
                <a-radio :value="1">
                  今日
                </a-radio>
                <a-radio :value="2">
                  昨日
                </a-radio>
                <a-radio :value="3">
                  近七日
                </a-radio>
              </a-radio-group>
              <div class="date_custom">
                <div class="text">自定义</div>
                <a-date-picker/>
              </div>
            </div>
            <div class="custom_target">
              <a-button type="primary" @click="clickCustomTarget">自定义指标</a-button>
            </div>
          </div>
          <ul class="data_type">
            <li :class="{ active: item.index === 0 }" @click="onDataTypeChange(item, 0)">
              <h3>花费</h3>
              <h4>￥32.00</h4>
            </li>
            <li :class="{ active: item.index === 1 }" @click="onDataTypeChange(item, 1)">
              <h3>点击均价</h3>
              <h4>￥32.00</h4>
            </li>
            <li :class="{ active: item.index === 2 }" @click="onDataTypeChange(item, 2)">
              <h3>曝光（次）</h3>
              <h4>￥32.00</h4>
            </li>
          </ul>
          <ul class="data_type">
            <li :class="{ active: item.index === 3 }" @click="onDataTypeChange(item, 3)">
              <h3>点击（次）</h3>
              <h4>￥32.00</h4>
            </li>
            <li :class="{ active: item.index === 4 }" @click="onDataTypeChange(item, 4)">
              <h3>查看历史数据</h3>
            </li>
            <li style="opacity: 0;"></li>
          </ul>
          <a-tabs type="card">
            <a-tab-pane :key="0" tab="点评+美团">
              <v-chart :forceFit="true" :height="400" :data="data" :scale="scale">
                <v-tooltip />
                <v-axis />
                <v-line position="year*value" />
                <v-point position="year*value" shape="circle" />
              </v-chart>
            </a-tab-pane>
            <a-tab-pane :key="1" tab="点评">chart2</a-tab-pane>
            <a-tab-pane :key="2" tab="美团">chart3</a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <a-row type="flex" justify="end" style="margin-top: 20px">
        <a-col>
          <a-pagination :default-current="1" :total="total" @showSizeChange="onShowSizeChange" />
        </a-col>
      </a-row>
    </a-card>
    <offer-price-model ref="offerPriceModel"></offer-price-model>
    <budget-modal ref="budgetModal"></budget-modal>
    <CustomIndicators v-if="customIndicatorsVisble" @onClose="customTargetClose"></CustomIndicators>
  </div>
</template>

<script>
import OfferPriceModel from './OfferPriceModel'
import BudgetModal from './BudgetModal'
import CustomIndicators from './CustomIndicators'
const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 }
]

const scale = [
  {
    dataKey: 'value',
    min: 0
  },
  {
    dataKey: 'year',
    min: 0,
    max: 1
  }
]
export default {
  name: 'Panel',
  data () {
    return {
      customIndicatorsVisble: false, // 自定义指标弹框
      total: 0,
      data,
      scale,
      queryParam: {
        merchantName: undefined,
        shopName: undefined,
        budget: 'all'
      },
      list: []
    }
  },
  components: {
    OfferPriceModel,
    BudgetModal,
    CustomIndicators
  },
  created () {
    this.$http('/api/getPanelList').then(res => {
      console.log(res)
      if (res.success) {
        res.voList.map(item => {
          item.index = 0
        })
        this.total = res.totalNum
        this.list = res.voList
      }
    })
  },
  methods: {
    onSearch () {
      // debugger;
    },
    onReset () {
      // debugger;
    },
    showOfferPriceModel () {
      this.$refs.offerPriceModel.showOfferVisible = true
    },
    // 预算 弹出框
    showBudgetModal () {
      this.$refs.budgetModal.budgetVisible = true
    },
    // 自定义指标弹框
    clickCustomTarget () {
       this.customIndicatorsVisble = true
    },
    // 自定义指标弹框 关闭
    customTargetClose () {
       this.customIndicatorsVisble = false
    },
    onDataTypeChange (item, index) {
      item.index = index
    },
    onShowSizeChange (current, pageSize) {
      console.log(current, pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
.shop_list {
  display: flex;
  flex-wrap: wrap;
  .shop_item {
    margin-bottom: 20px;
    box-shadow: 0px 0px 15px 0px rgba(51, 62, 80, 0.1);
    border-radius: 10px;
    padding: 1%;
    &:hover {
      box-shadow: 0px 0px 15px 0px rgba(24, 144, 255, 0.2);
    }
    .shop_item_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2%;
      .shop_item_title {
        flex: 1;
        align-items: center;
        justify-content: center;
        text-align: center;
        &.shop_item_title_shop {
          .ant-select {
            width: 80%;
            margin: 0 auto;
            display: block;
          }
        }
        &.shop_item_header_period {
          .ant-select {
            flex: 1;
          }
        }
        .shop_item_title_label {
          width: 60px;
        }
      }
      .warning_tip {
        color: #f00;
        font-weight: 700;
      }
      .shop_item_header_period {
        display: flex;
      }
    }
    .operate_area {
      display: flex;
      dl {
        flex: 1;
        border: 1px solid #d9d9d9;
        border-radius: 3px;
        margin-right: 1%;
        line-height: 30px;
        display: flex;
        flex-direction: column;
        dt {
          text-align: center;
        }
        dd {
          flex: 1;
          margin: 0;
        }
        ol {
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: space-around;
          text-align: center;
          height: 100%;
          li {
            flex: 1;
            border-right: 1px solid #d9d9d9;
            &:last-child {
              border: 0;
            }
            .operate_title {
              border-top: 1px solid #d9d9d9;
              border-bottom: 1px solid #d9d9d9;
            }
            i {
              color: rgba(255, 226, 63);
            }
            .seat {
              opacity: 0;
            }
            a {
              margin-left: 10px;
            }
          }
        }
      }
    }
    .data_type {
      display: flex;
      justify-content: space-around;
      padding: 0;
      li {
        text-align: center;
        width: 30%;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &.active {
          background-color: rgba(24, 144, 255, 0.2);
          border-color: rgba(24, 144, 255, 0.2);
          h3,
          h4 {
            color: #1890ff;
          }
        }
      }
    }
    .custom_box {
      display: flex;
      margin: 2% 0;
      align-items: center;
      justify-content: space-between;
      .custom_time {
        display: flex;
        .ant-radio-group {
          display: flex;
          align-items: center;
            .ant-radio-wrapper {
              margin:0;
            }
        }
        .date_custom {
          display: flex;
          align-items: center;
          .text {
            flex: 1;
          }
          .ant-calendar-picker {
            flex: 2;
            /deep/ .anticon {
              display:none
            }
          }
        }
      }
      .custom_target {
        transform:scale(0.8)
      }
    }
    /deep/.ant-tabs-nav {
      width: 100%;
      > div {
        display: flex;
        justify-content: space-around;
        .ant-tabs-tab {
          width: 30%;
          text-align: center;
        }
      }
    }
  }
}
/deep/ .ant-modal-body {
  padding-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .shop_list {
    .shop_item {
      width: 100%;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .shop_list {
    .shop_item {
      i,
      a {
        display: block;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .shop_list {
    .shop_item {
      width: 47%;
      margin-right: 1%;
    }
  }
}
@media screen and (min-width: 1600px) {
  .shop_list {
    .shop_item {
      width: 32%;
      margin-right: 1%;
    }
  }
}
</style>
